<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="fnsoxt"/>
<link href="templates/css/study.css" type="text/css" rel="stylesheet" media="all" />
<title>VVdict</title>
<script language="javascript" type="text/javascript" src="templates/js/jquery.js"></script>
<script language="javascript" type="text/javascript" src="templates/js/ui.core.js"></script>
<script language="javascript" type="text/javascript" src="templates/js/ui.draggable.js"></script>
<script language="javascript" type="text/javascript" src="templates/js/ui.droppable.js"></script>
<script language="javascript" type="text/javascript" src="templates/js/ui.sortable.js"></script>
<script language="javascript" type="text/javascript" src="templates/js/word.js"></script>
<!--<script language="javascript" type="text/javascript" src="templates/js/study.js"></script>-->
<script type="text/javascript">
$(function(){
var els = ['#content', '#sidebar-left', '#footer', '#sidebar-right'];
    var $els = $(els.toString());
    $els.sortable({
        items: '> ul',
        handle: 'h3',
        cursor: 'move',
        opacity: 0.8,
        appendTo: 'body',
        connectWith: els
    });
    $("ul.sort > h3").append('<span class="options"><a class="up"><img src="templates/images/up.gif" border="0"></a></span>');
    $("a.up").bind("click", moveup);
});
$(function(){
    reflesh($('#word').val(),1);
});
function moveup() {
    $(this).parents(".sort").find("li").toggle();    
}
function get_image(word,no) {
      $.getJSON("{{url controller="study" action="image"}}",
        {word:word,no:no},
        function(data){
            var str = "<img alt='loading...' src='?controller=search&action=showbysize&id="+data.pic_id+"'/>";
            $("#pic li").html(str);
        }); 
}
function get_explain(word,no){
      $.getJSON("{{url controller="study" action="explain"}}",
        {word:word,no:no},
        function(data){
            var str = data.pic_text+audio('?controller=pic&action=voice&word='+data.Word+'&no='+data.No);
            $("#explain li").html(str);
        }); 
}
function get_explainbyzh(word,no){
      $.getJSON("{{url controller="study" action="explain"}}",
        {word:word,no:no},
        function(data){
            var str = data.pic_text_zh;
            $("#explain_zh li").html(str);
        }); 
}
function get_mean(word) {
     $.getJSON("{{url controller="study" action="mean"}}",
        {word:word},
        function(data){
            var str = "<p>"+data.Word+str2img(data.YinBiao)+audio('?controller=word&action=voice&word='+word)+"</p><p>"+data.HanYuJieshe+"</p>";
            $("#mean li").html(str);
        });
}
function get_sentence(word,no){
      $.getJSON("{{url controller="study" action="sentence"}}",
        {word:word,no:no},
        function(data){
        var str = "<p>"+data.En_Sen+audio('?controller=sentence&action=voice&word='+data.Word+'&no='+data.No)+"</p><p>"+data.Chi_Sen+"</p>";
            $("#sentence li").html(str);
        }); 
}
function get_word(category,id,word,no,op){
      $.getJSON("{{url controller="study" action="getword"}}",
        {category:category,id:id,word:word,no:no,op:op},
        function(data){
            $("#id").val(data.id);
            $("#word").val(data.word);
            $("#no").val(data.no);
            reflesh(data.word,data.no);
        }); 
}
function get_word_begin(word){
     word = $('#wordbegin').val();
     $.getJSON("{{url controller="study" action="getwordbegin"}}",
        {word:word},
        function(data){
            $("#id").val(data.id);
            $("#word").val(data.word);
            $("#no").val(data.no);
            reflesh(data.word,data.no);
        }); 
}
function get_word_noargs(){
     aaid = $('#id').val();
     aaword = $('#word').val();
     aano = $('#no').val();
     aacategory = $('#category').val();
     aaop = 'next';
     $.getJSON("{{url controller="study" action="getword"}}",
        {category:aacategory,id:aaid,word:aaword,no:aano,op:aaop},
        function(data){
            $("#id").val(data.id);
            $("#word").val(data.word);
            $("#no").val(data.no);
            reflesh(data.word,data.no);
        }); 
}
function reflesh(word,no){
    get_image(word,no);
    get_mean(word);
    get_explain(word,no);
    get_explainbyzh(word,no);
    get_sentence(word,no);

}
function audio(c){
    var a;
	if(c!=""){
		a='<a href="javascript:return false;" onClick="ssplay(\''+c+'\');return false;" onMouseOver="ssplay(\''+c+'\')" onMouseOut="ssstop()"><img src="templates/images/audio.gif" border="0"></a>';
	}
	return a;
}
function getFlashMovieObject(movieName){
	if (window.document[movieName]){
		return window.document[movieName];
	}
	if(navigator.appName.indexOf("Microsoft Internet")==-1){
		if (document.embeds && document.embeds[movieName])
			return document.embeds[movieName];
	}
	else{
		return document.getElementById(movieName);
	}
}
function ssplay(c){
	var recite = getFlashMovieObject("recite");
	if(recite){
		recite.SetVariable("audio",c);
		recite.GotoFrame(1);
	}
}
function ssstop(){
	var recite = getFlashMovieObject("recite");
	if(recite){
		recite.GotoFrame(3);
	}
}
</script>
</head>
<body>
  {{webcontrol type="userstatus" name="mystatus"}}
	<div id="container">
        <div id="sidebar-left" class="ui-sortable">
			<ul id="example_en" class="sort">
				<h3>英英例句</h3>
                <li>fresheggs</li>
			</ul>
		</div>
		<div id="content" class="ui-sortable">
			<ul id="pic" class="sort">
				<h3>图片</h3>
				<li></li>
			</ul>
			<ul id="explain" class="sort">
				<h3>图片说明</h3>
				<li></li>
			</ul>
			<ul id="explain_zh" class="sort">
				<h3>英文说明</h3>
				<li></li>
			</ul>
		</div>
	<div id="sidebar-right" class="ui-sortable">
			<ul id="mean" class="sort">
				<h3>单词解释</h3>
				<li></li>
			</ul>
			<ul id="sentence" class="sort">
				<h3>例句</h3>
				<li></li>
			</ul>
	</div>
			<div class="clear"></div>
		<div id="footer" class="ui-sortable">
			<ul id="control" class="sort">
				<h3>控制面板</h3>
                <li>
                <input type="button" value="上一个" onclick="get_word($('#category').val(),$('#id').val(),$('#word').val(),$('#no').val(),'prev');">
                <input type="button" value="下一个" onclick="get_word($('#category').val(),$('#id').val(),$('#word').val(),$('#no').val(),'next');">
                <input type="button" value="播放" onclick="if(window.play)clearInterval(play);play = setInterval(get_word_noargs,$('#cycle').val()*1000);">
                时间间隔<input type="text" id="cycle" size="1"  value="5" />秒
                <input type="button" value="停止" onclick="if(window.play)clearInterval(play);">
                &nbsp;&nbsp;&nbsp;从单词
                <input type="text" id="wordbegin" size="9"  value="hello" />
                <input type="button" value="开始" onclick="get_word_begin($('#wordbegin').val());">
                </li>
			</ul>
		</div>
        <div id="hidden">
            <input type="hidden" id="id" value="{{$id}}" />
            <input type="hidden" id="word" value="{{$word}}" />
            <input type="hidden" id="no" value="1" />
            <input type="hidden" id="category" value="{{$category}}" />
        </div>
	</div>
    <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="0" height="0" id="recite" align="absmiddle"> 
    <param name="allowScriptAccess" value="always" /> 
    <param name="movie" value="templates/images/dict.swf" />
    <param name="quality" value="high" />
    <embed src="templates/images/dict.swf" quality="high" width="1" height="1" name="recite" align="absmiddle" allowScriptAccess="always" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /> 
    </object>
    <object id="player" type="audio/mp3" data="" width="0" height="0">
      <param name="src" value="" />
      <param name="autostart" value="true" />
      <param name="controller" value="false" />
    </object>
  {{webcontrol type="footer" name="myfooter"}}
    <!--str = $('#content').sortable('toArray');-->
    <!--setcookie('content',str);-->
    <!--alert(getcookie('content'));-->
</body>
</html>
